<template>
  <div class="mod-config" style="margin-left: 15px;margin-top: 16px;">

    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">

      <el-form-item>
        <el-button v-if="hasAuth('btn:oss:upload')" type="primary" @click="addOrUpdateHandle()">上传文件</el-button>
        <el-button
          v-if="hasAuth('btn:oss:remove')"
          type="danger"
          :disabled="dataListSelections.length <= 0"
          @click="deleteHandle()"
        >批量删除</el-button>
      </el-form-item>

    </el-form>

    <el-table
      v-loading="listLoading"
      :data="dataList"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >

      <el-table-column type="selection" header-align="center" align="center" width="50" />

      <el-table-column prop="id" header-align="center" align="center" label="id" />

      <el-table-column prop="url" header-align="center" align="center" label="预览图">
        <template slot-scope="scope">
          <el-image style="width: 130px; height: 130px" :src="scope.row.url" />
        </template>

      </el-table-column>

      <el-table-column prop="url" header-align="center" align="center" label="URL地址" />

      <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" />

      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="hasAuth('btn:oss:remove')"
            type="text"
            size="small"
            @click="deleteHandle(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalCount"
      style="padding: 30px 0; text-align: center;"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
  </div>
</template>

<script>
import AddOrUpdate from './oss-add-or-update'
import api from '@/api/system/oss'
export default {
  components: {
    AddOrUpdate
  },
  data() {
    return {
      dataForm: {
        keyword: ''
      },
      // 数据列表
      dataList: [],
      // 当前页码
      currentPage: 1,
      // 每页记录数
      pageSize: 10,
      // 总页数
      totalPage: 0,
      // 总记录数
      totalCount: 0,
      // 是否显示"等待数据显示"动画
      listLoading: false,
      // 选中行数组
      dataListSelections: [],
      // 是否显示添加或修改弹窗
      addOrUpdateVisible: false
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      api.getDataList({
        'page': this.currentPage,
        'limit': this.pageSize,
        'keyword': this.dataForm.keyword
      }).then(res => {
        this.listLoading = true

        this.currentPage = res.data.currPage
        this.pageSize = res.data.pageSize
        this.totalCount = res.data.totalCount
        this.totalPage = res.data.totalPage
        this.dataList = res.data.records

        this.listLoading = false
      })
    },
    // 每页数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getDataList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    // 多选
    handleSelectionChange(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle() {
      // 显示弹窗
      this.addOrUpdateVisible = true
      // this.$nextTick()函数表示: 将回调延迟到下次DOM更新循环之后执行
      this.$nextTick(() => {
        // this.$resfs.上面的ref=""属性的名称.需要引用的子组件中的方法名 表示: 调用子组件的方法
        this.$refs.addOrUpdate.init()
      })
    },
    // 删除
    deleteHandle(id) {
      // [id] 表示数组
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`是否对 [文件id=${ids.join(',')}] 进行 [${id ? '删除' : '批量删除'}] 操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$confirm(`此操作将不可逆, 是否继续?`, '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '算了',
          type: 'error'
        }).then(() => {
          api.deleteByIds(ids).then(res => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          })
        })
      })
    }
  }
}
</script>

<style>

</style>
